@charset "UTF-8";
@import "./theme/themeColor";
@import "extension/tags-list";

.day-mode {
  .article-list {
    background-color: #ffffff;
  }
}

.night-mode {
  .article-list {
    background-color: #3f3f3f;
  }
}

// 列表内容填充部分。
.article-list {
  box-sizing: border-box;
  &.no {
    background-color: transparent;
  }

  .article-item {
    display: flex;
    align-items: center;
    border-bottom: 1px dashed $form-input-text-color;
    padding: 15px;

    .left_img {
      width: 220px;
      height: 150px;
      margin-right: 10px;
      //border-radius: 5px;
      overflow: hidden;

      > a {
        display: block;

        img {
          width: 100%;
        }
      }
    }

    .right-html {
      width: calc(100% - 230px);

      .title_tag {
        .classTag {
          position: relative;
          display: inline-block;
          top: -2px;
          padding: 3px 6px;
          margin-right: 6px;
          border-radius: 3px;
          color: $text-color;
          background-color: $article-tag-bg-color;
          font-size: 12px;
          text-decoration: none;

          &:before {
            position: absolute;
            display: inline;
            right: -8px;
            top: 50%;
            margin-top: -4px;
            content: "";
            width: 0;
            height: 0;
            border-top: 4px solid transparent;
            border-left: 8px solid $article-tag-bg-color;
            border-bottom: 4px solid transparent;
          }
        }

        .article-title {
          display: inline;
          margin-top: 0;
          margin-bottom: 0;
          font-size: larger;
          letter-spacing: 1px;

          a {
            margin-right: 3px;
            font-size: 16px;
            font-weight: bold;
            &:hover {
              text-decoration: none;
            }
          }
        }

        .tags {
          display: inline-block;
          padding: 4px 6px;
          border: solid 1px $nav-red-color;
          border-radius: 3px;
          color: $nav-red-color;
        }
      }

      .article {
        margin-top: 20px;
        margin-bottom: 5px;

        .text {
          line-height: 24px;
          color: $hot-text-color;
          text-indent: 2em;
        }
      }


      /*
      // 暂时废弃这种现在以标签为主
      .meta {
        margin-bottom: 0;
        font-size: 14px;
        li {
          display: inline;
          margin-right: 20px;
          &:last-child {
            margin-right: 0;
          }
          .iconfont {
            vertical-align: middle;
            font-size: 14px;
          }
          span {
            vertical-align: middle;
          }
        }
      }*/
    }
  }

  .no-data {
    margin: 155px 0;
    h4 {
      margin-top: 45px;
    }
  }
}


/*
这里是响应式适配屏幕
*/
@media (max-width: 768px) {
  .article-list {
    .left_img {
      display: none;
    }

    .right-html {
      width: 100% !important;

      .article {
        margin-top: 2px !important;
        margin-bottom: 2px !important;
      }
    }
  }
}

@media (max-width: 468px) {
  .article-list {
    .right-html {
      ul.meta {
        padding-inline-start: 0;
      }
    }
  }
}

@media screen and (min-width: 768px) and (max-width: 992px) {
  .article-list {
    .article-item {
      padding: 5px;

      .left_img {
        width: 160px;
        height: 109px;

        > a {
          border-radius: 5px;

          img {
            width: 100%;
          }
        }
      }

      .right-html {
        width: calc(100% - 160px);

        .article {
          margin-top: 5px;
          margin-bottom: 5px;
        }
      }
    }
  }
}

@media screen and (min-width: 992px) and (max-width: 1170px) {
  .article-list {
  }
}

@media screen and (min-width: 1170px) and (max-width: 1679px) {
  .article-list {
  }
}

@media (min-width: 1679px) {
  .article-list {
    width: 978px;
  }
}


@media (max-width: 768px) {
  .article-list {
    //margin-left: 10px;
    //margin-right: 10px;
  }
}


@media (min-width: 768px) {
  .article-list {
    margin-left: 30px;
    margin-right: 30px;
  }
}


